import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import { Row, Col, Card, Statistic, Badge, Layout, List, Avatar, Button } from 'antd';
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  LikeOutlined,
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from '@ant-design/icons';

import './index.less';

const { Countdown } = Statistic;
const { Sider, Content } = Layout;
const { Meta } = Card;

const WorkCenterDOM = (props) => {
  const [initLoading, setInitLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const data = [
    { name: 'Racing car sprays burning fuel into crowd.', loading: true },
    { name: 'Racing car sprays burning fuel into crowd.', loading: true },
    { name: 'Racing car sprays burning fuel into crowd.', loading: true },
    { name: 'Racing car sprays burning fuel into crowd.', loading: true },
    { name: 'Racing car sprays burning fuel into crowd.', loading: true },
  ];

  useEffect(async () => {
    await getData();
  }, []);

  const getData = async () => {
    setTimeout(() => {
      setList([...list, ...data]);
    }, 1000);
  };

  const onLoadMore = async () => {
    await getData();
    setInitLoading(false);
    setLoading(true);
  };

  const loadMore = () => {
    return !initLoading && !loading ? (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button onClick={onLoadMore}>loading more</Button>
      </div>
    ) : null;
  };

  return (
    <div className="home-center">
      <Row gutter={16}>
        <Col className="gutter-row" span={6}>
          <Badge count={7}>
            <Card hoverable>
              <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
            </Card>
          </Badge>
        </Col>
        <Col className="gutter-row" span={6}>
          <Badge count={7}>
            <Card hoverable>
              <Statistic
                title="Active"
                value={11.28}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </Card>
          </Badge>
        </Col>
        <Col className="gutter-row" span={6}>
          <Badge count={7}>
            <Card hoverable>
              <Statistic
                title="Idle"
                value={9.3}
                precision={2}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ArrowDownOutlined />}
                suffix="%"
              />
            </Card>
          </Badge>
        </Col>
        <Col className="gutter-row" span={6}>
          <Badge count={7}>
            <Card hoverable>
              <Countdown
                title="Day Level"
                value={Date.now() + Math.pow(20, 10)}
                format="Y 年 M 月 D 日 HH:mm:ss:SSS"
              />
            </Card>
          </Badge>
        </Col>
      </Row>

      <Layout>
        <Sider width="350">
          <List
            itemLayout="horizontal"
            dataSource={data}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  avatar={
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                  }
                  title={<a href="https://ant.design">{item.title}</a>}
                  description="Ant Design, a defined by Ant UED Team"
                />
              </List.Item>
            )}
          />
        </Sider>
        <Content>
          <List
            grid={{
              gutter: 1,
              xs: 1,
              sm: 2,
              md: 2,
              lg: 3,
              xl: 3,
            }}
            dataSource={[1, 2, 3, 4, 5, 6, 7]}
            renderItem={(item) => (
              <List.Item>
                <Card
                  cover={
                    <img
                      alt="example"
                      src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                    />
                  }
                  actions={[
                    <SettingOutlined key="setting" />,
                    <EditOutlined key="edit" />,
                    <EllipsisOutlined key="ellipsis" />,
                  ]}
                >
                  <Meta
                    avatar={
                      <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    }
                    title="Card title"
                    description="This is the description"
                  />
                </Card>
              </List.Item>
            )}
          />
        </Content>
      </Layout>
    </div>
  );
};

export default connect()(WorkCenterDOM);
